<template>
    <div class="home">
      <div class="header">
        <a href=""><span></span></a>
        <span>选择联系人</span>
        <span @click="cancelLinkmanClick">取消</span>
      </div>
      <div class="content">
        <ul class="breadcrumb">
            <li v-for="(item,index) in navLists">
                <span @click="navClick(index)">{{item.name}}</span>
                <span class="smallAngle"></span>
            </li>
        </ul>
        <div class="allcheckBox">
            <div @click="numChangeDesign()" class="uncheckIcon" v-show="checkedDesign == false"></div>
            <div @click="numChangeDesign()" class="checkIcon" v-show="checkedDesign == true"></div>
            <div>全选</div>
        </div>
        <div class="branch">
            <ul>
                <li v-for="(item,index) in branchLists">
                    <div @click="checkClick(index)" class="uncheckIcon" v-show="item.open == false"></div>
                    <div @click="unchenkClick(index)" class="checkIcon" v-show="item.open == true"></div>
                    <div :class="{grayColor:item.isAuth == 0 || item.isActivite ==0}">{{item.name}}</div>
                    <div v-show="item.type == 1">
                        <div class="line">|</div>
                        <div class="levelIcon" @click="leftNextClick(index)"></div>
                    </div>
                </li>
            </ul>

        </div>
      </div>
      <footer class="foot">
          <div id="wrapper">
              <ul>
                  <li v-for="(item,index) in selectedLists">
                      {{item.name}}
                  </li>
              </ul>
          </div>
          <div :class="{sureBtn:true,graybg:selectedLists.length==0}" @click="sureBtnClick()">确定</div>
      </footer>
      
      <!-- 提示信息 -->
      <div class="tip" v-show="isTip">
        <p>{{tipMessage}}</p>
      </div>
      <!--退出弹出框-->
      <div class="delPopup" v-show="isShowdel">
          <transition name="slide-fade">
              <div class="delContent">
                  <v-deleteBox @ok="okClick" @canle="canleClick" :name="titlenameVal"></v-deleteBox>
              </div>
          </transition>
      </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
import deleteBox from "./cModule/del";
export default {
  data() {
    return {
      tipMessage: "服务器错误", //提示信息内容
      isTip: false, //提示信息是否出现
      oid: "7274e24d5deb444fb973b7dd18d7cca2",
      uid: "aeb5e154962341438c02ab5f62601982",
      isShowdel: false, //删除提示框是否出现
      titlenameVal: "确定要放弃此次输入？", //弹出框提示文字
      navLists: [], //面包屑导航数组
      branchLists: [], //下级部门的数组
      selectedLists: [], //选中的人员和部门的数组
      checkedDesign: false, //默认全选按钮为不选中
      ischeckedDesignBranch: false, //判断是否能进行全选的标志
      isnextClick: false //点击下一级开关控制
    };
  },
  components: {
    "v-deleteBox": deleteBox
  },
  created: function() {
    // self.oid = this.$route.query.oid
    // self.uid = this.$route.query.uid
    if (sessionStorage.getItem("sureList")) {
      this.selectedLists = JSON.parse(sessionStorage.getItem("sureList"));
    }
    this.listFun();
  },
  watch: {},
  methods: {
    // 获取当前企业
    listFun() {
      var self = this;
      self.branchLists = [];
      this.getdeptstaff({
        oid: self.oid,
        uid: self.uid,
        appId:'1',
        deptId: ""
      })
        .then(data => {
          if (data.code == "000000") {
            self.navLists = [{ name: data.data.name, deptId: data.data.id }];
            this.getdeptstaff({
              oid: self.oid,
              uid: self.uid,
              appId:'1',
              deptId: data.data.id
            })
              .then(data => {
                if (data.code == "000000") {
                  data.data.forEach(function(ele, ind) {
                    self.branchLists.push({
                      name: ele.name,
                      open: false,
                      parentId: ele.parentId,
                      type: ele.type,
                      id: ele.id,
                      isAuth: ele.isAuth,
                      isActivite: ele.isActivite
                    });
                  });
                  if (self.selectedLists.length > 0) {
                    self.branchLists.forEach(function(eleLeft, eleLeftInd) {
                      self.selectedLists.forEach(function(eleRight, rightInd) {
                        if (eleLeft.id == eleRight.id) {
                          self.branchLists[eleLeftInd].open = true;
                        }
                      });
                    });
                    self.judgeSelectAll();
                  }
                } else {
                  this.tipMessage = data.msg;
                  this.isTip = true;
                  setTimeout(() => {
                    this.isTip = false;
                  }, 1000);
                }
              })
              .catch(msg => {
                this.tipMessage = "服务器错误";
                this.isTip = true;
                setTimeout(() => {
                  this.isTip = false;
                }, 1000);
              });
          } else {
            this.tipMessage = data.msg;
            this.isTip = true;
            setTimeout(() => {
              this.isTip = false;
            }, 1000);
          }
        })
        .catch(msg => {
          this.tipMessage = "服务器错误";
          this.isTip = true;
          setTimeout(() => {
            this.isTip = false;
          }, 1000);
        });
    },
    // 点击导航
    navClick(index) {
      var self = this;
      if (index == self.navLists.length - 1) {
        return;
      } else {
        this.getdeptstaff({
          oid: self.oid,
          uid: self.uid,
          appId:'1',
          deptId: self.navLists[index].deptId
        })
          .then(data => {
            if (data.code == "000000") {
              self.branchLists = [];
              var start = index + 1;
              self.navLists.splice(index + 1, self.navLists.length - start);
              data.data.forEach(function(ele, ind) {
                self.branchLists.push({
                  name: ele.name,
                  open: false,
                  parentId: ele.parentId,
                  type: ele.type,
                  id: ele.id,
                  isAuth: ele.isAuth,
                  isActivite: ele.isActivite
                });
              });
              if (self.selectedLists.length > 0) {
                self.branchLists.forEach(function(eleLeft, eleLeftInd) {
                  self.selectedLists.forEach(function(eleRight, rightInd) {
                    if (eleLeft.id == eleRight.id) {
                      self.branchLists[eleLeftInd].open = true;
                    }
                  });
                });
                self.judgeSelectAll();
              }
            } else {
              this.tipMessage = data.msg;
              this.isTip = true;
              setTimeout(() => {
                this.isTip = false;
              }, 1000);
            }
          })
          .catch(msg => {
            this.tipMessage = "服务器错误";
            this.isTip = true;
            setTimeout(() => {
              this.isTip = false;
            }, 1000);
          });
      }
    },
    // 点击下一级
    leftNextClick(index) {
      var self = this;
      if (self.isnextClick == false) {
        self.isnextClick = true;
        this.getdeptstaff({
          oid: self.oid,
          uid: self.uid,
          appId:'1',
          deptId: self.branchLists[index].id
        })
          .then(data => {
            self.isnextClick = false;
            if (data.code == "000000") {
              self.navLists.push({
                name: self.branchLists[index].name,
                deptId: self.branchLists[index].id
              });
              self.branchLists = [];
              data.data.forEach(function(ele, ind) {
                self.branchLists.push({
                  name: ele.name,
                  open: false,
                  parentId: ele.parentId,
                  type: ele.type,
                  id: ele.id,
                  isAuth: ele.isAuth,
                  isActivite: ele.isActivite
                });
              });
              if (self.selectedLists.length > 0) {
                self.branchLists.forEach(function(eleLeft, eleLeftInd) {
                  self.selectedLists.forEach(function(eleRight, rightInd) {
                    if (eleLeft.id == eleRight.id) {
                      self.branchLists[eleLeftInd].open = true;
                    }
                  });
                });
                self.judgeSelectAll();
              }
            } else {
              this.tipMessage = data.msg;
              this.isTip = true;
              setTimeout(() => {
                this.isTip = false;
              }, 1000);
            }
          })
          .catch(msg => {
            self.isnextClick = false;
            this.tipMessage = "服务器错误";
            this.isTip = true;
            setTimeout(() => {
              this.isTip = false;
            }, 1000);
          });
      }
    },
    // 取消选中商品
    unchenkClick(index) {
      var self = this;
      this.branchLists[index].open = !this.branchLists[index].open;
      self.selectedLists.forEach(function(ele, ind) {
        if (ele.id == self.branchLists[index].id) {
          self.selectedLists.splice(ind, 1);
        }
      });
      this.judgeSelectAll();
    },
    // 选中商品
    checkClick(index) {
      var self = this;
      if (
        self.branchLists[index].isAuth == 0 &&
        self.branchLists[index].type == 1
      ) {
      } else if (
        self.branchLists[index].isActivite == 0 &&
        self.branchLists[index].type == 2
      ) {
      } else {
        this.branchLists[index].open = !this.branchLists[index].open;
        self.selectedLists.push({
          name: this.branchLists[index].name,
          id: this.branchLists[index].id,
          type: this.branchLists[index].type
        });
        // 数组去重
        var hash = {};
        self.selectedLists = self.selectedLists.reduce(function(item, next) {
          hash[next.id] ? "" : (hash[next.id] = true && item.push(next));
          return item;
        }, []);
        this.judgeSelectAll();
      }
    },
    // 判断是否全选
    judgeSelectAll() {
      var rArrs = [];
      this.branchLists.forEach(function(ele, ind) {
        if (ele.open == true) {
          rArrs.push({
            name: ele.name,
            open: false,
            parentId: ele.parentId,
            type: ele.type,
            id: ele.id,
            isAuth: ele.isAuth,
            isActivite: ele.isActivite
          });
        }
      });
      var hash = {};
      rArrs = rArrs.reduce(function(item, next) {
        hash[next.id] ? "" : (hash[next.id] = true && item.push(next));
        return item;
      }, []);
      if (rArrs.length == this.branchLists.length && rArrs.length !== 0) {
        this.checkedDesign = true;
      } else {
        this.checkedDesign = false;
      }
    },
    // 所有序号被选中时
    numChangeDesign() {
      var self = this;
      self.ischeckedDesignBranch = false;
      self.branchLists.forEach(function(ele, ind) {
        if (
          (ele.isAuth == 0 && ele.type == 1) ||
          (ele.isActivite == 0 && ele.type == 2)
        ) {
          self.ischeckedDesignBranch = true;
        }
      });
      if (self.ischeckedDesignBranch == true) {
        self.checkedDesign = false;
        this.tipMessage = "不能选择没有权限的部门或未激活的人员！";
        this.isTip = true;
        setTimeout(() => {
          this.isTip = false;
        }, 1000);
      } else {
        self.checkedDesign = !self.checkedDesign;
        if (self.checkedDesign == true) {
          this.branchLists.forEach(function(ele, ind) {
            ele.open = true;
            self.selectedLists.push({
              name: ele.name,
              id: ele.id,
              type: ele.type
            });
            // 数组去重
            var hash = {};
            self.selectedLists = self.selectedLists.reduce(function(
              item,
              next
            ) {
              hash[next.id] ? "" : (hash[next.id] = true && item.push(next));
              return item;
            },
            []);
          });
        } else {
          this.branchLists.forEach(function(ele, ind) {
            ele.open = false;
          });
          var newArr = [];
          for (var i = 0; i < self.selectedLists.length; i++) {
            for (var j = 0; j < self.branchLists.length; j++) {
              if (self.selectedLists[i].id == self.branchLists[j].id) {
                break;
              } else if (j == self.branchLists.length - 1) {
                newArr.push({
                  name: self.selectedLists[i].name,
                  id: self.selectedLists[i].id
                });
              }
            }
          }
          self.selectedLists = newArr;
        }
      }
    },
    // 点击确认返回
    okClick() {
      this.isShowdel = false;
    },
    canleClick() {
      this.isShowdel = false;
    },
    // 选择成员点击确定按钮
    sureBtnClick() {
      var self = this;
      if (this.selectedLists.length == 0) {
        return;
      } else {
        sessionStorage.setItem("sureList", JSON.stringify(this.selectedLists));
        self.$router.push({
          path: "/addnoticeSecond"
        });
      }
    },
    // 取消选择
    cancelLinkmanClick() {
      sessionStorage.removeItem("sureList");
      this.$router.push({
        path: "/addnoticeSecond"
      });
    },
    ...mapActions(["getdeptstaff"])
  }
};
</script>
<style scoped>
/* 删除弹框 */

.delPopup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background: rgba(126, 109, 105, 0.4);
}

.delContent {
  width: 60%;
  height: 10rem;
  background-color: #fff;
  border-radius: 10px;
  margin: calc((100vh - 10rem) / 2) auto;
  z-index: 100000;
}
/* ----------- */
.tip {
  position: fixed;
  width: 27rem;
  height: 4rem;
  background: #000;
  opacity: 0.6;
  z-index: 500;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 0.5rem;
  line-height: 4rem;
  text-align: center;
  color: #fff;
}
/* .angle {
  border-left: 0.3rem solid #fff;
  border-bottom: 0.3rem solid #fff;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 1.85rem;
  transform: rotate(45deg);
  float: left;
} */
.header {
  height: 5rem;
  line-height: 5rem;
  background-color: #fff;
  font-weight: normal;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}
.header a {
  float: left;
  margin-left: 1rem;
  min-width: 2.8rem;
  min-height: 5rem;
}
.header > span:nth-of-type(1) {
  font-size: 1.6rem;
}
.header > span:nth-of-type(2) {
  float: right;
  margin-right: 1rem;
  color: #fd6162;
}
.content {
  margin-top: 5rem;
  background: #ecebf1;
  height: calc(100vh - 5rem);
}
.smallAngle {
  float: right;
  border-left: 0.2rem solid #757575;
  border-bottom: 0.2rem solid #757575;
  width: 1rem;
  height: 1rem;
  /* margin-top: 1.4rem; */
  transform: rotate(-135deg);
}
.breadcrumb {
  overflow: hidden;
  padding: 1rem 0;
}
.breadcrumb li {
  height: 3.5rem;
  /* line-height: 3.5rem; */
  float: left;
  margin-left: 0.8rem;
  color: #dd5725;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
}
.breadcrumb li span {
  float: left;
}
.breadcrumb li:nth-last-child(1) {
  color: rgb(117, 117, 117);
}
.allcheckBox {
  height: 4.6rem;
  /* line-height: 4.6rem; */
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e7e7e7;
}
/* .allcheckBox div{
    float: left;
} */
.uncheckIcon {
  /* width: 2.2rem; */
  width: 6%;
  height: 2.2rem;
  border-radius: 50%;
  background: url(/static/img/talk_ic_unchoose.png) no-repeat;
  background-size: 2.2rem 2.2rem;
  margin: 0 1rem;
}
.checkIcon {
  width: 6%;
  /* width: 2.2rem; */
  height: 2.2rem;
  border-radius: 50%;
  background: url(/static/img/pay_click_check.png) no-repeat;
  background-size: 2.2rem 2.2rem;
  margin: 0 1rem;
}
.branch {
  margin-top: 2rem;
}
.branch li {
  background: #fff;
  border-bottom: 1px solid #e7e7e7;
  display: flex;
  height: 4.6rem;
  /* line-height: 4.6rem; */
  align-items: center;
}
/* .branch li div */
.branch li div:nth-of-type(3) {
  width: 83%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.branch li div:nth-of-type(4) {
  width: 11%;
  display: flex;
  align-items: center;
}
.line {
  color: #ccc;
}
.levelIcon {
  width: 2rem;
  height: 2.5rem;
  background: url(/static/img/dept.png) no-repeat;
  background-size: 2rem 2.1rem;
  margin-left: 0.6rem;
}
footer {
  padding: 0.8rem 1rem;
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100%;
  background: #fff;
}
.sureBtn {
  width: 6rem;
  color: white;
  background: rgb(226, 113, 71);
  border-radius: 5px;
  text-align: center;
  padding: 0.5rem 0;
}
#wrapper {
  overflow-x: auto;
  width: 80%;
  display: flex;
  align-items: center;
}
#wrapper ul {
  white-space: nowrap;
}
#wrapper ul li {
  display: inline-block;
  border-radius: 10px;
  background: #fff;
  margin-right: 0.6rem;
  font-size: 1rem;
  text-align: center;
  padding: 0.5rem;
  border: 1px solid #d1d1d1;
}
.grayColor {
  color: #ccc;
}
.graybg {
  background-color: rgb(204, 204, 204) !important;
}
</style>